<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

  <head>

    <title>Candlesticks</title>

    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta http-equiv="CACHE-CONTROL" CONTENT="NO-CACHE">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="canvasxpress, canvas, html5, graph, chart, plot, javascript, javascript library, genomic, scientific, android, animation, bar graph, line graph, dotplot, boxplot, heatmap, newick, scatter, 3d, pie, correlation, venn, network, market, candlestick, genome browser, isaac neuhaus"/>
    <meta name="description" content=""/>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta name="Rating" content="general" />
    <meta name="googlebot" content="index,follow" />
    <meta name="robots" content="index,follow" />
    <meta name="author" content="Isaac Neuhaus" />
    <meta name="google-site-verification" content="UmQp3wIY7r9cDwr5LRdUDeDkpxAxg0Lv5tUc3tW9-90" />

    <link rel="stylesheet" href="./css/global.css" type="text/css"/>
    <style type="text/css">
      table.example {margin: 10px; border-collapse: collapse;}
      td.example {vertical-align: top;}
      div br {clear: both;}
      div.code, div.json, div.pre {font-size: medium; clear: both;}
      div.desc {font-size: small;}
      div.h3 {font-size: 150%}
      div.h4 {font-size: 120%}
      table.config {font-size: small; border-collapse: collapse; margin: 10px; width: 800px;}
      td.first-col {border: 1px solid #000000; padding: 4px; width: 35%; vertical-align: top;}
      td.sec-col {border: 1px solid #1D222B; padding: 4px; width: 65%; vertical-align: top;}
      tr.private {background-color: #EEEEEE;}
      tr.public {background-color: #FFFFFF;}
      span.light {font-size: small; color: #777777; font-style: italic;}
      caption {background-color:  #DDDDDD; border-top: 1px solid #1D222B;  border-right: 1px solid #1D222B;  border-left: 1px solid #1D222B; color: #FFFFFF: font-size: 150%; padding: 2px 6px; text-align: left;}
      div.canvas {margin: 10px;}
    </style>

    <!--[if IE]><script type="text/javascript" src="./js/excanvas.js"></script><![endif]-->
    <!--[if IE]><script type="text/javascript" src="./js/extext.js"></script><![endif]-->
    <script type="text/javascript" src="./js/canvasXpress.min.js"></script>

    <script>

      var showDemo = function () {
        new CanvasXpress('canvas',
                         {market: [{symbol: 'BMY',
                                    data: [[20100824, 26.26, 26.37, 25.95, 26.02, 11625900, 26.02],
                                           [20100823, 26.48, 26.76, 26.38, 26.48, 12146600, 26.48],
                                           [20100820, 26.31, 26.54, 26.08, 26.44, 18140100, 26.44],
                                           [20100819, 26.20, 26.29, 25.81, 26.06, 8218000, 26.06],
                                           [20100818, 26.53, 26.57, 26.23, 26.28, 12235800, 26.28],
                                           [20100817, 26.40, 26.79, 26.26, 26.59, 12325700, 26.59],
                                           [20100816, 26.24, 26.34, 26.04, 26.28, 10377700, 26.28],
                                           [20100813, 26.24, 26.46, 26.10, 26.32, 5760100, 26.32],
                                           [20100812, 26.01, 26.39, 26.00, 26.33, 7350500, 26.33],
                                           [20100811, 26.32, 26.50, 26.15, 26.25, 8808100, 26.25],
                                           [20100810, 26.32, 26.78, 26.30, 26.66, 7009500, 26.66],
                                           [20100809, 26.37, 26.54, 26.30, 26.51, 6825300, 26.51],
                                           [20100806, 26.29, 26.45, 26.05, 26.37, 8774900, 26.37],
                                           [20100805, 25.83, 26.38, 25.80, 26.38, 12264600, 26.38],
                                           [20100804, 25.70, 26.13, 25.61, 26.03, 10233700, 26.03],
                                           [20100803, 25.65, 25.85, 25.58, 25.68, 6842900, 25.68],
                                           [20100802, 25.33, 25.61, 25.29, 25.53, 9770900, 25.53],
                                           [20100730, 24.98, 25.13, 24.78, 24.92, 11435700, 24.92],
                                           [20100729, 25.37, 25.50, 24.85, 25.08, 9463800, 25.08],
                                           [20100728, 25.25, 25.36, 25.02, 25.12, 8072400, 25.12],
                                           [20100727, 25.09, 25.35, 24.84, 25.32, 14152600, 25.32],
                                           [20100726, 24.57, 25.03, 24.57, 24.97, 8817400, 24.97],
                                           [20100723, 24.94, 24.95, 24.26, 24.65, 13043700, 24.65],
                                           [20100722, 24.96, 25.22, 24.75, 24.93, 10385300, 24.93],
                                           [20100721, 24.92, 25.11, 24.59, 24.75, 9830000, 24.75],
                                           [20100720, 24.65, 25.09, 24.46, 25.02, 10655500, 25.02],
                                           [20100719, 25.27, 25.27, 24.78, 24.84, 11804800, 24.84],
                                           [20100716, 25.44, 25.47, 25.10, 25.17, 13136300, 25.17]]}]},
                         {graphType: 'Candlestick',
                          resizerType: 'samples',
                          resizerPosition: 'bottom',
                          showSma5: true,
                          showSma10: true,
                          showSma25: true,
                          showLegend: false,
                          smpLabelRotate: 90,
                          colors: ['rgb(0,183,217)'],
                          graphOrientation: 'vertical'});
        new CanvasXpress('canvas1',
                         {market: [{symbol: 'BMY',
                                    data: [[20100824, 26.26, 26.37, 25.95, 26.02, 11625900, 26.02],
                                           [20100823, 26.48, 26.76, 26.38, 26.48, 12146600, 26.48],
                                           [20100820, 26.31, 26.54, 26.08, 26.44, 18140100, 26.44],
                                           [20100819, 26.20, 26.29, 25.81, 26.06, 8218000, 26.06],
                                           [20100818, 26.53, 26.57, 26.23, 26.28, 12235800, 26.28],
                                           [20100817, 26.40, 26.79, 26.26, 26.59, 12325700, 26.59],
                                           [20100816, 26.24, 26.34, 26.04, 26.28, 10377700, 26.28],
                                           [20100813, 26.24, 26.46, 26.10, 26.32, 5760100, 26.32],
                                           [20100812, 26.01, 26.39, 26.00, 26.33, 7350500, 26.33],
                                           [20100811, 26.32, 26.50, 26.15, 26.25, 8808100, 26.25],
                                           [20100810, 26.32, 26.78, 26.30, 26.66, 7009500, 26.66],
                                           [20100809, 26.37, 26.54, 26.30, 26.51, 6825300, 26.51],
                                           [20100806, 26.29, 26.45, 26.05, 26.37, 8774900, 26.37],
                                           [20100805, 25.83, 26.38, 25.80, 26.38, 12264600, 26.38],
                                           [20100804, 25.70, 26.13, 25.61, 26.03, 10233700, 26.03],
                                           [20100803, 25.65, 25.85, 25.58, 25.68, 6842900, 25.68],
                                           [20100802, 25.33, 25.61, 25.29, 25.53, 9770900, 25.53],
                                           [20100730, 24.98, 25.13, 24.78, 24.92, 11435700, 24.92],
                                           [20100729, 25.37, 25.50, 24.85, 25.08, 9463800, 25.08],
                                           [20100728, 25.25, 25.36, 25.02, 25.12, 8072400, 25.12],
                                           [20100727, 25.09, 25.35, 24.84, 25.32, 14152600, 25.32],
                                           [20100726, 24.57, 25.03, 24.57, 24.97, 8817400, 24.97],
                                           [20100723, 24.94, 24.95, 24.26, 24.65, 13043700, 24.65],
                                           [20100722, 24.96, 25.22, 24.75, 24.93, 10385300, 24.93],
                                           [20100721, 24.92, 25.11, 24.59, 24.75, 9830000, 24.75],
                                           [20100720, 24.65, 25.09, 24.46, 25.02, 10655500, 25.02],
                                           [20100719, 25.27, 25.27, 24.78, 24.84, 11804800, 24.84],
                                           [20100716, 25.44, 25.47, 25.10, 25.17, 13136300, 25.17]]}]},
                         {graphType: 'Candlestick',
                          background: 'rgb(245,245,245)',
                          backgroundType: 'window',
                          graphOrientation: 'horizontal',
                          showVolume: false});
      }

      var jumpTo = function(url) {
        parent.location=url
      }

      var showSourceCode = function(id) {
        var c = document.getElementById(id)
        if (c) {
          var d = c.style.display
          if (d == 'none') {
            c.style.display = 'block';
          } else {
            c.style.display = 'none';
          }
        }
      }

      var showCode = function(cb, t) {
        var cx = CanvasXpress.references
          for (var i = 0; i < CanvasXpress.references.length; i++) {
            if (CanvasXpress.references[i].target == t) {
              var c = CanvasXpress.references[i];
              if(cb.checked) {
                c.showCode = true;
                c.draw()
              } else {
                c.showCode = false;
                c.hideCodeDiv()
              }
            }
          }
      }

      var showData = function(cb, t) {
        var cx = CanvasXpress.references
          for (var i = 0; i < CanvasXpress.references.length; i++) {
            if (CanvasXpress.references[i].target == t) {
              var c = CanvasXpress.references[i];
              if(cb.checked) {
                c.showDataTable = true;
              } else {
                c.showDataTable = false;
              }
              c.draw()
            }
          }
      }

    </script>

  </head>

  <body onload="showDemo();">

    <div class="page">

      <div class="header">

        <a href="./" class="logo">canvasXpress | Javascript Canvas Graphing Library</a>

        <div class="share">
          <a class="addthis_button" href="http://addthis.com/bookmark.php?v=250&amp;username=xa-4c58a3ba2ff9a164">
            <img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/>
          </a>
          <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c58a3ba2ff9a164"></script>
        </div>

        <div class="donate">
          <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
            <input type="hidden" name="cmd" value="_s-xclick">
            <input type="hidden" name="hosted_button_id" value="EVP6CWVNJN7SY">
            <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
            <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
          </form>
        </div>

        <ul class="nav">
          <li ><a href="./">Home</a></li>
          <li ><a href="./about.html">About</a></li>
          <li ><a href="./documentation.html">Documentation</a></li>
          <li class="current"><a href="./bar.html">Examples</a></li>
          <li ><a href="./download.html">Download</a></li>
          <li ><a href="./contact.html">Contact</a></li>
        </ul>

      </div>

      <div class="wrap">

        <div class="content">

          <div id="examples">

            <div class="chooseGraph">
              <select onchange="jumpTo(this.value)">
                <option selected="selected">Select a Graph...</option>
                <option value="./bar.html">Bar graphs</option>
                <option value="./line.html">Line graphs</option>
                <option value="./barline.html">Bar-line combination</option>
                <option value="./boxplot.html">Boxplots</option>
                <option value="./dotplot.html">Dotplots</option>
                <option value="./area.html">Area graphs</option>
                <option value="./stacked.html">Stacked graphs</option>
                <option value="./correlation.html">Correlation plots</option>
                <option value="./venn.html">Venn diagrams</option>
                <option value="./heatmap.html">Heatmaps</option>
                <option value="./scatter2d.html">2D-scatter plots</option>
                <option value="./scatter3d.html">3D-scatter plots</option>
                <option value="./pie.html">Pie charts</option>
                <option value="./candlestick.html">Stock Market charts</option>
                <option value="./network.html">Networks (or pathways)</option>
                <option value="./genome.html">Genome browser</option>
                <option value="./circular.html">Circular plots</option>
                <option value="./layout.html">Complex plot layouts</option>
                <option value="./extjs.html">Ext-JS Panel</option>
                <option value="./test.html">Test Page</option>
              </select>
            </div>
            <br>

          </div>

          <h1>Candlesticks</h1>

          <div class='desc'>
            <p>
            </p>
          </div>

            <div>
              <br /><br />
              <form>
                <div style="width: 613px;">
                  <input alt="Code included in the HTML page" title="Code included in the HTML page" type="checkbox" value="ch1-canvas" onclick="showSourceCode('code-canvas')"/>Show Source Code&nbsp;&nbsp;&nbsp;&nbsp;
                  <input alt="Code transformed after initialized CanvasXpress" title="Code transformed after initialized CanvasXpress" type="checkbox" value="ch2-canvas" onclick="showCode(this, 'canvas')"/>Show Transformed Code&nbsp;&nbsp;&nbsp;&nbsp;
                  <input alt="Show data in HTML table" title="Show data in HTML table" type="checkbox" value="ch3-canvas" onclick="showData(this, 'canvas')"/>Show Data
                </div>
              </form>
              <canvas id="canvas" width="613" height="500"></canvas>
            </div>
            <div class="code" id="code-canvas" style="display: none;">
              <pre>
                new CanvasXpress('canvas',
                                 {market: [{symbol: 'BMY',
                                            data: [[20100824, 26.26, 26.37, 25.95, 26.02, 11625900, 26.02],
                                                   [20100823, 26.48, 26.76, 26.38, 26.48, 12146600, 26.48],
                                                   [20100820, 26.31, 26.54, 26.08, 26.44, 18140100, 26.44],
                                                   [20100819, 26.20, 26.29, 25.81, 26.06, 8218000, 26.06],
                                                   [20100818, 26.53, 26.57, 26.23, 26.28, 12235800, 26.28],
                                                   [20100817, 26.40, 26.79, 26.26, 26.59, 12325700, 26.59],
                                                   [20100816, 26.24, 26.34, 26.04, 26.28, 10377700, 26.28],
                                                   [20100813, 26.24, 26.46, 26.10, 26.32, 5760100, 26.32],
                                                   [20100812, 26.01, 26.39, 26.00, 26.33, 7350500, 26.33],
                                                   [20100811, 26.32, 26.50, 26.15, 26.25, 8808100, 26.25],
                                                   [20100810, 26.32, 26.78, 26.30, 26.66, 7009500, 26.66],
                                                   [20100809, 26.37, 26.54, 26.30, 26.51, 6825300, 26.51],
                                                   [20100806, 26.29, 26.45, 26.05, 26.37, 8774900, 26.37],
                                                   [20100805, 25.83, 26.38, 25.80, 26.38, 12264600, 26.38],
                                                   [20100804, 25.70, 26.13, 25.61, 26.03, 10233700, 26.03],
                                                   [20100803, 25.65, 25.85, 25.58, 25.68, 6842900, 25.68],
                                                   [20100802, 25.33, 25.61, 25.29, 25.53, 9770900, 25.53],
                                                   [20100730, 24.98, 25.13, 24.78, 24.92, 11435700, 24.92],
                                                   [20100729, 25.37, 25.50, 24.85, 25.08, 9463800, 25.08],
                                                   [20100728, 25.25, 25.36, 25.02, 25.12, 8072400, 25.12],
                                                   [20100727, 25.09, 25.35, 24.84, 25.32, 14152600, 25.32],
                                                   [20100726, 24.57, 25.03, 24.57, 24.97, 8817400, 24.97],
                                                   [20100723, 24.94, 24.95, 24.26, 24.65, 13043700, 24.65],
                                                   [20100722, 24.96, 25.22, 24.75, 24.93, 10385300, 24.93],
                                                   [20100721, 24.92, 25.11, 24.59, 24.75, 9830000, 24.75],
                                                   [20100720, 24.65, 25.09, 24.46, 25.02, 10655500, 25.02],
                                                   [20100719, 25.27, 25.27, 24.78, 24.84, 11804800, 24.84],
                                                   [20100716, 25.44, 25.47, 25.10, 25.17, 13136300, 25.17]]}]},
                                 {graphType: 'Candlestick',
                                  resizerType: 'samples',
                                  resizerPosition: 'bottom',
                                  showSma5: true,
                                  showSma10: true,
                                  showSma25: true,
                                  showLegend: false,
                                  smpLabelRotate: 90,
                                  colors: ['rgb(0,183,217)'],
                                  graphOrientation: 'vertical'});
              </pre>
            </div>

            <div>
              <br /><br />
              <form>
                <div style="width: 613px;">
                  <input alt="Code included in the HTML page" title="Code included in the HTML page" type="checkbox" value="ch1-canvas1" onclick="showSourceCode('code-canvas1')"/>Show Source Code&nbsp;&nbsp;&nbsp;&nbsp;
                  <input alt="Code transformed after initialized CanvasXpress" title="Code transformed after initialized CanvasXpress" type="checkbox" value="ch2-canvas1" onclick="showCode(this, 'canvas1')"/>Show Transformed Code&nbsp;&nbsp;&nbsp;&nbsp;
                  <input alt="Show data in HTML table" title="Show data in HTML table" type="checkbox" value="ch3-canvas1" onclick="showData(this, 'canvas1')"/>Show Data
                </div>
              </form>
              <canvas id="canvas1" width="613" height="500"></canvas>
            </div>
            <div class="code" id="code-canvas1" style="display: none;">
              <pre>
                new CanvasXpress('canvas1',
                                 {market: [{symbol: 'BMY',
                                            data: [[20100824, 26.26, 26.37, 25.95, 26.02, 11625900, 26.02],
                                                   [20100823, 26.48, 26.76, 26.38, 26.48, 12146600, 26.48],
                                                   [20100820, 26.31, 26.54, 26.08, 26.44, 18140100, 26.44],
                                                   [20100819, 26.20, 26.29, 25.81, 26.06, 8218000, 26.06],
                                                   [20100818, 26.53, 26.57, 26.23, 26.28, 12235800, 26.28],
                                                   [20100817, 26.40, 26.79, 26.26, 26.59, 12325700, 26.59],
                                                   [20100816, 26.24, 26.34, 26.04, 26.28, 10377700, 26.28],
                                                   [20100813, 26.24, 26.46, 26.10, 26.32, 5760100, 26.32],
                                                   [20100812, 26.01, 26.39, 26.00, 26.33, 7350500, 26.33],
                                                   [20100811, 26.32, 26.50, 26.15, 26.25, 8808100, 26.25],
                                                   [20100810, 26.32, 26.78, 26.30, 26.66, 7009500, 26.66],
                                                   [20100809, 26.37, 26.54, 26.30, 26.51, 6825300, 26.51],
                                                   [20100806, 26.29, 26.45, 26.05, 26.37, 8774900, 26.37],
                                                   [20100805, 25.83, 26.38, 25.80, 26.38, 12264600, 26.38],
                                                   [20100804, 25.70, 26.13, 25.61, 26.03, 10233700, 26.03],
                                                   [20100803, 25.65, 25.85, 25.58, 25.68, 6842900, 25.68],
                                                   [20100802, 25.33, 25.61, 25.29, 25.53, 9770900, 25.53],
                                                   [20100730, 24.98, 25.13, 24.78, 24.92, 11435700, 24.92],
                                                   [20100729, 25.37, 25.50, 24.85, 25.08, 9463800, 25.08],
                                                   [20100728, 25.25, 25.36, 25.02, 25.12, 8072400, 25.12],
                                                   [20100727, 25.09, 25.35, 24.84, 25.32, 14152600, 25.32],
                                                   [20100726, 24.57, 25.03, 24.57, 24.97, 8817400, 24.97],
                                                   [20100723, 24.94, 24.95, 24.26, 24.65, 13043700, 24.65],
                                                   [20100722, 24.96, 25.22, 24.75, 24.93, 10385300, 24.93],
                                                   [20100721, 24.92, 25.11, 24.59, 24.75, 9830000, 24.75],
                                                   [20100720, 24.65, 25.09, 24.46, 25.02, 10655500, 25.02],
                                                   [20100719, 25.27, 25.27, 24.78, 24.84, 11804800, 24.84],
                                                   [20100716, 25.44, 25.47, 25.10, 25.17, 13136300, 25.17]]}]},
                                 {graphType: 'Candlestick',
                                  background: 'rgb(245,245,245)',
                                  backgroundType: 'window',
                                  graphOrientation: 'horizontal',
                                  showVolume: false});
              </pre>
            </div>

        </div>

        <br /><br /><br />
        <div class="clear">&nbsp;</div>

      </div>

      <div class="footer">

        Copyright &copy; 2010 canvasXpress.org |
        <a href="mailto:imnphd@gmail.com">Isaac&nbsp;Neuhaus</a> |
        Site Powered by <a href="http://www.artician.net">Artician</a>

      </div>

    </div>

    <div style="text-indent:-9999px;">
      &nbsp;
    </div>

    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-601687-37']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>

  </body>

</html>
